<ui:composition 
    xmlns="http://www.w3.org/1999/xhtml"
    xmlns:ui="http://java.sun.com/jsf/facelets"
    template="/App/WebApp/template/plantilla.xhtml"
    xmlns:p="http://primefaces.org/ui"
    xmlns:f="http://java.sun.com/jsf/core"
    xmlns:h="http://java.sun.com/jsf/html">

    <ui:define name="content">
        <h:form id="gradicoForm">

            <h:panelGrid columns="1" cellpadding="5" style="text-align: center; width: 100%" >

                <p:lineChart id="linear" value="#{graficosController.linearModel}"  
                             title="Estacion: #{graficosController.estacion1.codigo}  - Magnitud: #{graficosController.detalle1.magnitud.descripcion}" 
                             yaxisLabel="#{graficosController.detalle1.unidadMedida.simbolo}"
                             xaxisLabel="Hs."
                             animate="true"
                             legendPosition="e"
                             zoom="true" widgetVar="chart"
                             />  

                <p:commandButton type="button" value="Reset Zoom" icon="ui-icon-cancel" onclick="chart.resetZoom()"/>

                <h:panelGrid columns="2" cellpadding="5" style="text-align: center; width: 100%" >

                    <p:panel>
                        <h:panelGrid id="estacionPnlGrid" columns="2" cellpadding="5">

                            <h:outputText value="Estación: " /> 
                            <p:selectOneMenu id="estacionSelect" value="#{graficosController.estacion1}">  
                                <f:selectItem itemLabel="Seleciona Estacion" itemValue="" />
                                <f:selectItems value="#{usuarioMenuController.usuario.estacionList}" var="estacion"
                                               itemValue="#{estacion}" itemLabel="#{estacion.toString()}"/>  
                                <p:ajax  update="estacionPnlGrid, linear"
                                         event="change"
                                         listener="#{graficosController.graficar()}"/>
                            </p:selectOneMenu>

                            <h:outputText value="Magnitud: " rendered="#{not empty graficosController.estacion1}"/> 
                            <p:selectOneRadio  id="detalleSelect" value="#{graficosController.detalle1}" layout="pageDirection">  
                                <f:selectItems value="#{graficosController.estacion1.estacionDetalleList}" var="estacionDetalle" 
                                               itemValue="#{estacionDetall}" itemLabel="#{estacionDetalle.magnitud.descripcion}" />  
                                <p:ajax update="linear" 
                                        event="change"
                                        listener="#{graficosController.graficar()}"/>
                            </p:selectOneRadio > 

                        </h:panelGrid>
                    </p:panel>


                    <p:panel>
                        <h:panelGrid id="periodoPnlGrid" columns="2" cellpadding="5">

                            <h:outputText value="Periodo: " /> 
                            <p:selectOneMenu id="periodoSelect" value="#{graficosController.periodo}" style="width:120px"> 
                                <f:selectItem itemLabel="DIA" itemValue="1" />
                                <f:selectItem itemLabel="MES" itemValue="3" />
                                <f:selectItem itemLabel="AÑO" itemValue="4" />
                                <p:ajax  update="periodoPnlGrid, linear"
                                         listener="#{graficosController.graficar()}"/>
                            </p:selectOneMenu>

                            <h:outputText value="Fecha: " rendered="#{graficosController.periodo==1}" /> 
                            <p:calendar locale="es" value="#{graficosController.diaSeleccionado}" mode="inline" 
                                        rendered="#{graficosController.periodo==1}">
                                <p:ajax event="dateSelect" update="linear" listener="#{graficosController.graficar()}"/> 
                            </p:calendar>

                            <h:outputText value="Año: " rendered="#{graficosController.periodo==3 or graficosController.periodo==4}" /> 
                            <p:selectOneMenu value="#{graficosController.anhoSeleccionado}" style="width:120px" 
                                             rendered="#{graficosController.periodo==3 or graficosController.periodo==4}">  
                                <f:selectItems value="#{graficosController.anhos}" var="anho"
                                               itemValue="#{anho}" itemLabel="#{anho.anho}"/>  
                                <p:ajax  update="estacionPnlGrid, linear"
                                         event="change"
                                         listener="#{graficosController.graficar()}"/>
                            </p:selectOneMenu>
                            
                            <h:outputText value="Mes: " rendered="#{graficosController.periodo==3}" /> 
                            <p:selectOneMenu value="#{graficosController.mesSeleccionado}" style="width:120px"
                                             rendered="#{not empty graficosController.anhoSeleccionado and graficosController.periodo==3}">  
                                <f:selectItems value="#{graficosController.meses}" var="mes"
                                               itemValue="#{mes}" itemLabel="#{mes.mesString}"/>  
                                <p:ajax  update="estacionPnlGrid, linear"
                                         event="change"
                                         listener="#{graficosController.graficar()}"/>
                            </p:selectOneMenu>

                        </h:panelGrid>
                    </p:panel>

                </h:panelGrid>

            </h:panelGrid>

        </h:form>
    </ui:define>

</ui:composition>
